<template>
  <a-card :bordered="false">

    <a-row :gutter="24">
      <a-col :md="3">
        <div class="table-operator">
          <div style="border-color: #0077AA">
            <a-dropdown :trigger="['contextmenu']">
              <a-tree @select="onSelect" :treeData="treeData" :selectedKeys="selectedKeys">
              </a-tree>
            </a-dropdown>
          </div>
        </div>
      </a-col>
      <a-col :md="21">
        <a-card :bordered="false" title="">
          <div style="margin-bottom: 5px;">
            <!-- slot="extra" -->
            <a-button type="primary" style="margin-left: 5px" size="small" @click="deletes">
              <a-icon type="delete" />彻底删除</a-button>
            <a-button type="primary" style="margin-left: 5px" size="small" @click="recycler">
              <a-icon type="notification" />恢复还原</a-button>
            <a-input-search style="margin-left: 16px; width: 180px;" :allowClear="true" placeholder="请输入标题" size="small" @search="searchKey"/>
          </div>

          <s-table
            ref="table"
            size="small"
            rowKey="id"
            bordered
            :scroll="{ x: 1500 }"
            :columns="columns"
            :data="loadData"
            :locale="{emptyText: '暂无内容'}"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange:onSelectChange }">
            >
            <span slot="status" slot-scope="state, record">
              <template>
                <a-tag color="orange" v-if="state == '0' ">草稿 {{ record.checkUserName ? '/' +record.checkUserName:'' }}</a-tag>
                <a-tag color="red" v-if="state == '1' ">已发布{{ record.checkUserName ? '/' +record.checkUserName:'' }}</a-tag>
                <a-tag color="red" v-if="state == '2' ">已删除{{ record.checkUserName ? '/' +record.checkUserName:'' }}</a-tag>
              </template>
            </span>

            <span slot="copied" slot-scope="val">
              <template>
                <a-tag color="orange" v-if="val ">转载</a-tag>
                <a-tag color="green" v-else>原创</a-tag>
              </template>
            </span>

            <div slot="custitle" slot-scope="text, item">
              <template>
                <div class="list-content-cover">
                  <a-avatar
                    style="cursor:pointer"
                    @click="preview"
                    v-if="item.cover && item.cover.length>0"
                    slot="avatar"
                    size="large"
                    shape="square"
                    :src="(item.cover)[0].url" />
                  <a-avatar
                    style="cursor:pointer"
                    @click="preview"
                    v-else
                    slot="avatar"
                    size="large"
                    shape="square"
                    src="/tk.jpg" />
                </div>
                <div class="list-content-title">
                  <a><span v-html="$substr(item.title,10)"></span></a><br>
                  <a slot="description" v-if="item.description"><span v-html="$substr(item.description,15)"></span></a>
                  <a slot="description" v-else><span v-html="$substr(item.subTitle,15)"></span></a>
                </div>
              </template>
            </div>

            <span slot="expiryDate" slot-scope="text">
              <template>
                <span v-if="text">
                  <a-icon type="clock-circle" />{{ text }} </span>
                <span v-if="!text">
                  <a-icon type="close-circle" /> </span>
              </template>
            </span>

            <span slot="cname" slot-scope="text">
              <template>
                <span v-html="$substr(text,5)"></span>
              </template>
            </span>

            <span slot="modelName" slot-scope="text">
              <template>
                <span v-html="$substr(text,8)"></span>
              </template>
            </span>

            <span slot="action" slot-scope="text, record">
              <template>
                <a-tag color="blue" @click="handleView(record)">预览</a-tag>
              </template>
            </span>
          </s-table>
        </a-card>
      </a-col>
    </a-row>
    <a-modal :visible="previewVisible" :footer="null" @cancel="cancelPreview">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-card>
</template>

<script>
  import moment from 'moment'
  import {
    pageRecycler,
    treeCategory,
    delRealByPks,
    recyclerByPks
  } from '@/api/site/content'
  import {
    STable
  } from '@/components'
  export default {
    name: 'TableList',
    components: {
      STable
    },
    props: {
      statusFilter: {
        type: Function,
        default: undefined
      }
    },
    data () {
      return {
        mdl: {},
        advanced: false,
        treeData: [],
        selectedKeys: ['0'],
        dropdownVisible: false,
        previewVisible: false,
        previewImage: null,
        status: '-1',
        selectedRowKeys: [],
        selectedRows: [],
        queryParam: {
          dto: {
            categoryId: '0'
          }
        },
        columns: [{
            title: '标题',
            dataIndex: 'title',
            width: 330,
            scopedSlots: {
              customRender: 'custitle'
            }
          },
          {
            title: '分类',
            align: 'center',
            dataIndex: 'categoryName',
            scopedSlots: {
              customRender: 'cname'
            }
          },
          {
            title: '模型',
            align: 'center',
            dataIndex: 'modelName',
            scopedSlots: {
              customRender: 'modelName'
            }
          },
          {
            title: '转载',
            align: 'center',
            dataIndex: 'copied',
            scopedSlots: {
              customRender: 'copied'
            }
          },

          {
            title: '状态/发布人',
            align: 'center',
            dataIndex: 'status',
            scopedSlots: {
              customRender: 'status'
            }
          },
          {
            title: '置顶级别',
            align: 'center',
            dataIndex: 'sort'
          },
          {
            title: '创建日期',
            align: 'center',
            dataIndex: 'gmtCreate',
            customRender: data => {
              if (data) return moment(data).format('YYYY-MM-DD HH:mm:ss')
            }
          },
          {
            title: '发布日期',
            align: 'center',
            dataIndex: 'publishDate',
            customRender: data => {
              if (data) return moment(data).format('YYYY-MM-DD HH:mm:ss')
            }
          },
          {
            title: '是否定时',
            dataIndex: 'expiryDate',
            scopedSlots: {
              customRender: 'expiryDate'
            }
          }
          // {
          //   title: '操作',
          //   dataIndex: 'action',
          //   fixed: 'right',
          //   width: '300px',
          //   scopedSlots: {
          //     customRender: 'action'
          //   }
          // }
        ],
        loadData: parameter => {
          return pageRecycler(Object.assign(parameter, this.queryParam)).then(
            response => {
              if (response.code === 0) {
                 return response.res
              } else {
                 return { total: 0, rows: [] }
              }
            }
          )
        },
        pageNo: 1,
        pageSize: 10,
        total: 0,
        publishModels: []
      }
    },
    watch: {
      status (newValue, oldValue) {
        if (newValue === '-1') {
          this.queryParam.dto.status = null
        } else {
          this.queryParam.dto.status = newValue
        }
        this.handleOk()
      }
    },
    created () {
      this.initTreeCategory()
    },
    methods: {
      initTreeCategory () {
        treeCategory().then(response => {
          if (response.code === 0) {
            this.treeData = [response.res]
          }
        })
      },
      onSelect (selectedKeys, e) {
        if (e.selected) {
          this.selectedKeys = selectedKeys
        }
        this.queryParam.dto.categoryId = e.node.dataRef.id
        this.$refs.table.refresh()
      },
      deletes () {
        if (this.selectedRowKeys.length === 0) {
          this.$message.error('请选择要操作的记录')
          return
        }
        const that = this
        this.$confirm({
          title: '操作提醒',
          content: '确定要删除吗?',
          onOk () {
            delRealByPks(that.selectedRowKeys)
              .then(response => {
                if (response.code === 0) {
                  that.$message.info(response.msg)
                  that.handleOk()
                } else {
                  that.$message.error(response.msg)
                }
              })
              .catch(response => {
                that.$message.warn(response.msg)
              })
          },
          onCancel () {}
        })
      },
      recycler () {
        if (this.selectedRowKeys.length === 0) {
          this.$message.error('请选择要操作的记录')
          return
        }
        const that = this
        this.$confirm({
          title: '操作提醒',
          content: '确定要还原吗?',
          onOk () {
            recyclerByPks(that.selectedRowKeys)
              .then(response => {
                if (response.code === 0) {
                  that.$message.info(response.msg)
                  that.handleOk()
                } else {
                  that.$message.error(response.msg)
                }
              })
              .catch(response => {
                that.$message.warn(response.msg)
              })
          },
          onCancel () {}
        })
      },
      searchKey (key) {
         this.queryParam.dto.title = null
         if (key) {
           this.queryParam.dto.title = key
         }
         this.$refs.table.refresh(true)
         this.unSelect()
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      unSelect () {
        this.selectedRowKeys = []
        this.selectedRows = []
      },
      preview (e) {
        this.previewImage = e.target.currentSrc
        this.previewVisible = true
      },
      handleOk () {
        this.unSelect()
        this.$refs.table.refresh()
      },
      resetSearchForm () {
        this.queryParam = {
          dto: {}
        }
        this.handleOk()
      }
    }
  }
</script>
<style>
  ::-webkit-scrollbar-track-piece {
    background-color: whitesmoke !important;
  }

  ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #e8e8e8 !important;
    background-clip: padding-box;
    min-height: 28px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #e8e8e8 !important;
  }

  .ant-avatar-lg {
    width: 38px;
    height: 38px;
    line-height: 38px;
  }

  .list-content-cover {
    width: 15%;
    float: left;
  }

  .list-content-title {
    width: 80%;
    float: left;
    margin-left: 9px;
    height: 38px;
    line-height: 19px;
  }
</style>
